<template>
    <el-container style="height: 100vh">
      <!-- 头部导航 -->
      <el-header height="60px">
        <h2>系统配置</h2>
      </el-header>
  
      <!-- 主体内容区域 -->
      <el-main>
        <!-- 左侧菜单栏 -->
        <el-menu mode="inline" >
          <el-submenu index="1">
            <template slot="title">区块链节点管理</template>
            <el-menu-item index="1-1">添加节点</el-menu-item>
            <el-menu-item index="1-2">编辑节点</el-menu-item>
            <el-menu-item index="1-3">删除节点</el-menu-item>
            <el-menu-item index="1-4">查看节点列表</el-menu-item>
          </el-submenu>
  
          <el-submenu index="2">
            <template slot="title">数据库配置</template>
            <el-menu-item index="2-1">数据库连接设置</el-menu-item>
            <el-menu-item index="2-2">备份与恢复</el-menu-item>
          </el-submenu>
  
          <el-submenu index="3">
            <template slot="title">系统参数设定</template>
            <el-menu-item index="3-1">基本参数</el-menu-item>
            <el-menu-item index="3-2">高级选项</el-menu-item>
          </el-submenu>
        </el-menu>
  
        <!-- 右侧内容区域，动态加载对应左侧菜单的选择 -->
        <div class="system-config-content">
          <router-view></router-view>
        </div>
      </el-main>
  
      <!-- 底部操作区 -->
      <el-footer>
        <el-button type="primary" @click="saveConfigurations">保存配置</el-button>
        <el-button type="warning" @click="resetConfigurations">重置为默认</el-button>
      </el-footer>
    </el-container>
  </template>
  
  <script>
  export default {
    methods: {
      handleMenuSelect({ index }) {
        // 根据选中的菜单项切换路由或显示相应的配置子页面
        this.$router.push(`/config/${index}`);
      },
  
      saveConfigurations() {
        // 提交表单数据至后端保存配置信息
        this.$emit('on-save-config');
      },
  
      resetConfigurations() {
        // 弹出确认对话框并执行重置操作
        this.$confirm('确定要重置所有配置至默认值吗？', '警告', { confirmButtonText: '确定', cancelButtonText: '取消' })
          .then(() => {
            // 调用重置配置的API或逻辑
            this.resetToDefaults();
          })
          .catch(() => {});
      },
      
      // 实现具体的配置编辑功能
      // ...
    },
  };
  </script>